<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="referrer" content="same-origin" />

		<title>{% block title %}{% endblock %}</title>
		<meta name="description" content='Maloja is a self-hosted music scrobble server.' />
		<link rel="icon" type="image/x-icon" href="/favicon.ico" />

		<meta name="color-scheme" content="dark" />
		<meta name="darkreader" content="wat" />

		<link rel="stylesheet" href="/maloja.css" />
		<link rel="stylesheet" href="/static/css/themes/{{ settings.theme }}.css" />
		{% for cssf in conf.custom_css_files %}
			<link rel="stylesheet" href="/static_custom/css/{{ cssf }}" />
		{% endfor %}

		<script src="/search.js"></script>
		<script src="/neopolitan.js"></script>
		<script src="/upload.js"></script>
		<script src="/notifications.js"></script>
		<script src="/edit.js"></script>
		<script>
		const defaultpicks = {
			topartists: '{{ settings["DEFAULT_RANGE_STARTPAGE"] }}',
			toptracks: '{{ settings["DEFAULT_RANGE_STARTPAGE"] }}',
			topalbums: '{{ settings["DEFAULT_RANGE_STARTPAGE"] }}',
			pulse: '{{ settings["DEFAULT_RANGE_STARTPAGE"] }}',
			pulseperformancecombined: '{{ settings["DEFAULT_RANGE_STARTPAGE"] }}',
			featured: 'artist'
		}
		</script>

		<link rel="preload" href="/static/ttf/Ubuntu-Regular.ttf" as="font" type="font/woff2" crossorigin />

		{% block scripts %}{% endblock %}
	</head>

	<body class="{% block custombodyclasses %}{% endblock %}">

		{% block content %}

		<table class="top_info">
			<tr>
				<td class="image">
					<div style="background-image:url('{% block imageurl %}/favicon.png{% endblock %}')"></div>
				</td>
				<td class="text">
					<h1>{% block heading %}{% endblock %}</h1><br/>


					{% block top_info %}

					{% endblock %}
				</td>
			</tr>
		</table>

			{% block maincontent %}

			{% endblock %}
		{% endblock %}



        <div id="footer">
          <div id="left-side">
            <a href="/about">About</a>
          </div>
          <div id="notch">
            <a href="/"><img style="display:block;" src="/favicon.png" /></a>
          </div>
          <div id="right-side">
            <span><input id="searchinput" placeholder="Search for an album, artist or track..." oninput="search(this)" onblur="clearresults()" /></span>
          </div>


			<div id="resultwrap" class="hide">
				<div class="searchresults">
					<span>Artists</span>
					<table class="searchresults_artists" id="searchresults_artists">
					</table>
					<br/><br/>
					<span>Tracks</span>
					<table class="searchresults_tracks searchresults_extrainfo" id="searchresults_tracks">
					</table>
					<br/><br/>
					<span>Albums</span>
					<table class="searchresults_albums searchresults_extrainfo" id="searchresults_albums">
					</table>
				</div>
			</div>
		</div>

		<div id="icon_bar">
			{% block icon_bar %}{% endblock %}
			{% include 'icons/settings.jinja' %}
		</div>


		<div id="notification_area">

		</div>


    <!-- Load script as late as possible so DOM renders first -->
    <script src="/lazyload17-8-2.min.js"></script>
    <script>
        var lazyLoadInstance = new LazyLoad({});
    </script>
	</body>
</html>
